<template>
<div>
    <div class="edit">
      <!-- 富文本组件 -->
 <vue-tinymce
 v-model="this.Edits.originalContent"
 @catchData="catchData"

 />
 <!-- 富文本正下方 -->
 <div class='edit_bottom' v-if="isAdd">
     <span>原文链接</span>
     <input v-model="Edits.originalHref" placeholder="请输入..." style="width: 485px"/>
     <el-button>
       <a :href="Edits.originalHref" target="_blank">打开</a>
     </el-button>
 </div>
 <el-row class="button_group">
  <el-button style="width:100px" v-if="isPachong" @click="prevContent">上一篇</el-button>
  <el-button style="width:100px" @click="drawer = true">预览</el-button>
  <!-- 预览效果模块 -->
  <el-drawer
  title="预览iphone6/7/8"
  :modal="false"
  :visible.sync="drawer"
  class="a"
  size=45%>
  <div class="textPreview" style="width:375px;height:667px;border:1px solid;margin:0 auto;overflow:auto;box-sizing:border-box" v-html="Edits.originalContent"></div>
</el-drawer>
  <el-button style="width:100px" @click="invalid" v-if="isPachong">划无效</el-button>
  <el-button style="width:100px" @click="nextContent" v-if="isPachong">下一篇</el-button>
  <el-button style="width:100px" @click="lssue">{{ isPachong ? '发布' : isAdd ? '修改' : '发布' }}</el-button>
</el-row>
 </div>
<!-- 富文本右边 -->
<div class="edit_right">
  <!-- 右边模块上方 -->
    <div class="edit_right_top">
        <h3>设置资讯</h3>
        <span>资讯标题：
          <el-input
         v-model="informationTitle"
  clearable
  style="width:600px">

</el-input></span>
<span>资讯来源：<el-input
  placeholder="请输入内容"
  v-model="source"
  clearable
  style="width:600px">
</el-input></span>
<span>资讯日期：
  <el-date-picker
    style="width:600px"
    v-model="informationDate"
    type="date"
    value-format="yyyy-MM-dd"
    placeholder="格式(yyyy-mm-dd)">
    </el-date-picker>
</span>
<span>资讯标签：
  <RadioGroup v-model="tags" type="button">
    <Radio v-for="tag in labelName" :label="tag" :key="tag">{{ tag }}</Radio>
  </RadioGroup>
</span>
<span>所属场馆：
  <el-select
    style="width: 600px"
    v-model="museumId"
    filterable
    remote
    reserve-keyword
    placeholder="请输入选择博物馆"
    :remote-method="shuruxuanze">
    <el-option
      v-for="item in museumList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</span>
<!-- 自定义标签 -->
<el-button class="button-new-tag" size="small" @click="customClassification(true)" >自定义标签</el-button>

<span>资讯频道：
  <RadioGroup v-model="channelCategoryId" type="button">
    <Radio v-for="item in mainTags" :key="item.id" :label="item.id">{{ item.name }}</Radio>
  </RadioGroup>
</span>
<el-button class="button-new-tag" size="small" @click="customClassification(false)" >自定义分类</el-button>
<el-dialog
   :modal-append-to-body='false'
   :title="title"
  :visible.sync="dialogVisible"
   width="30%"
  >
  <el-input
    type="text"
    placeholder="请输入内容"
    v-model="text"
    maxlength="10"
    show-word-limit
  />
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="customLabel()">确 定</el-button>
  </span>
</el-dialog>

<span>
  <span style="margin-right: 13px">资讯主图</span>
  <vue-uploadimg
    :imgUrl="imagePath"
    :clear="clear"
    style="width: 400px"
    @uploadImg="uploadImg"
  />
</span>
    </div>

    <!-- 富文本右边下方 -->
    <div class="edit_right_bottom">
     <h3>设置默认参数</h3>
     <div class="edit_set_module">
         <span>
             是否频道推荐
             <el-select v-model="articlePageShow" placeholder="请选择" class="all_style">
    <el-option
      v-for="item in articlePageShowArr"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
         </span>

         <span>推荐权重
             <el-input v-model="articlePageWeight" placeholder="请输入内容" class="all_style"/>
         </span>
         <span>
             是否推荐首页
             <el-select v-model="frontPageShow" placeholder="请选择" class="all_style">
    <el-option
      v-for="item in articlePageShowArr"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
         </span>
         <span>推荐权重
             <el-input v-model="frontPageWeight" placeholder="请输入内容" class="all_style"/>
         </span>
         <span>
             是否推荐合辑
           <el-select v-model="childCategoryId" placeholder="请选择" class="all_style">
              <el-option
                v-for="item in childTags"
                :key="item.value"
                :label="item.name"
                :value="item.id">
                {{ item.name }}
              </el-option>
            </el-select>
         </span>
         <span>推荐权重
             <el-input v-model="childCategoryWeight" :disabled="childTags.length === 0" placeholder="请输入内容" class="all_style"/>
         </span>
         <span>
             是否显示
             <el-select v-model="showHide" placeholder="请选择" class="all_style">
    <el-option
      v-for="item in articlePageShowArr"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
         </span>
         <span>点击数
             <el-input v-model="clicks"  placeholder="请输入内容" class="all_style"></el-input>
         </span>
         <span>
             收藏数
             <el-input v-model="collectNum"  placeholder="请输入内容" class="all_style"></el-input>

         </span>
         <span>分享数
             <el-input v-model="shareNum"  placeholder="请输入内容" class="all_style"></el-input>
         </span>
         <span>
             点赞数
              <el-input  v-model="likesNum" placeholder="请输入内容" class="all_style "></el-input>

         </span>

     </div>

    </div>
    </div>
  </div>
</template>

<script>
import tinymce from '../../components/tinymce.vue'

let methods = {
  // 获取资讯标签
  getlabelName () {
    this.$http('/stage/article/getArticleLabel', {}, 'get', res => {
      this.labelName = res.data.data
    })
  },
  // 输入文本
  catchData (data) {
    this.Edits.originalContent = data
  },
  // 下一篇文章
  nextContent () {
    if (!this.Edits.nextId) return
    this.$router.push({path: '/informationEdit', query: {id: this.Edits.nextId, source: 'pachong'}})
  },
  // 上一篇文章
  prevContent () {
    if (!this.Edits.prevId) return
    this.$router.push({path: '/informationEdit', query: {id: this.Edits.prevId, source: 'pachong'}})
  },
  // 根据路由的id 请求本次文章的数据
  getWen () {
    this.$http('/stage/spider/getSpiderLibDTO', {id: this.$route.query.id}, 'get', (res) => {
      this.Edits.originalContent = res.data.data.originalContent
      this.Edits.originalHref = res.data.data.originalHref
      this.Edits.nextId = res.data.data.nextId
      this.Edits.prevId = res.data.data.previousId
      this.informationTitle = res.data.data.title
      this.source = res.data.data.articleFrom
      this.frontPageShow = false
      this.showHide = true
      this.articlePageShow = false
      this.clicks = 100
    })
  },
  // 删除按钮
  handleRemove (file, fileList) {
    console.log(file, fileList)
  },
  // 自定义分类名标签名
  customClassification (bol) {
    if (bol == true) {
      this.addDialogVisible = true
      this.dialogVisible = true
      this.title = '请输入标签名'
    } else {
      this.addDialogVisible = false
      this.dialogVisible = true
      this.title = '请输入分类名'
    }
  },
  // 自定义之后点击确认键将自定义标签名渲染到页面
  customLabel () {
    if (this.text != '') {
      if (this.addDialogVisible == true) {
        this.dialogVisible = false
        this.$http('/stage/article/addArticleLabel', { labelName: this.text }, 'post', res => {
          this.getlabelName()
        })
        this.text = ''
      } else {
        console.log(this.text, this.lableName2)
        this.dialogVisible = false
        this.$http('/stage/article/addChannelCategory', { name: this.text }, 'post', res => {
          this.$http('/stage/article/getChannelCategory', {}, 'get', data => {
            this.mainTags = data.data.data
          })
        })
      }
    } else {
      console.log(this.frontPageShow + '+数据+' + this.frontPageWeight)
      console.log(this.articlePageShow + '+数据+' + this.articlePageWeight)
      console.log(this.childCategoryId + '+数据+' + this.childCategoryWeight)
      console.log(this.source)
      console.log(this.informationTitle)
      console.log(this.htmlContent)
      alert('内容不能为空')
    }
  },
  // 发布
  lssue () {
    if (!this.imagePath) {
      this.$message({
        message: '图片还未上传成功, 稍等一下',
        type: 'warning'
      })
      return
    }
    console.log(this.channelCategoryId)
    if (!Number(this.channelCategoryId)) {
      this.$message({
        message: '必须选择主频道',
        type: 'error'
      })
      return
    }
    let data = {
      childCategoryId: this.childCategoryId,
      childCategoryWeight: this.childCategoryWeight - 0,
      articleLabel: this.tags.toString(),
      articlePageShow: this.articlePageShow,
      articlePageWeight: this.articlePageWeight - 0,
      author: '',
      channelCategoryId: this.channelCategoryId - 0,
      clicks: this.clicks - 0,
      collectNum: this.collectNum - 0,
      frontPageShow: this.frontPageShow,
      frontPageWeight: this.frontPageWeight - 0,
      htmlContent: this.Edits.originalContent,
      imagePath: this.imagePath,
      likesNum: this.likesNum - 0,
      originalHref: this.Edits.originalHref,
      publishDate: this.informationDate.split(' ')[0],
      shareNum: this.shareNum - 0,
      showHide: this.showHide,
      source: this.source,
      title: this.informationTitle,
      museumId: this.museumId
    }
    // 是资讯列表来的
    if (localStorage.getItem('Edit')) {
      data.id = this.Edits.id - 0
      this.$http('/stage/article/modifyArticle', data, 'post', res => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          localStorage.removeItem('Edit')
        } else {
          this.$message({
            message: '日期格式是yyyy-MM-dd',
            type: 'error'
          })
        }
      })
    } else { // 是爬虫列表来的
      if (this.$route.query.id) {
        data.spiderLibId = this.$route.query.id - 0
      }
      this.$http('/stage/article/releaseArticle', data, 'post', res => {
        if (res.data.code === 200) {
          this.$message({
            message: '发布成功',
            type: 'success'
          })
          localStorage.removeItem('Edit')
        }
      })
    }
    this.$router.push({name: '资讯列表'})
  },
  // 划无效按钮
  invalid () {
    let { id } = this.$route.query
    this.$http('/stage/spider/disuseSpiderLib', { id }, 'get', (res) => {
      console.log(res)
    })
  },
  // 获取key
  getFilePrefix () {
    this.$http('/stage/file/getFilePrefix', {}, 'get', (res) => {
      this.qiniuDataThree.key = res.data.data
    })
  },
  // 获取上传文件token
  getAccessToken () {
    this.$http('/stage/file/getAccessToken', {}, 'get', (res) => {
      this.qiniuDataThree.token = res.data.data
    })
  },
  uploadImg (data) {
    console.log(data)
    this.imagePath = data
  },
  // 输入选择场馆
  shuruxuanze (v) {
    this.$http('/stage/museum/getAppMuseumDropDown', {name: v}, 'post', res => {
      this.museumList = res.data.data
      console.log(res)
    })
  }
}
export default {
  components: { tinymce },
  destroyed () {
    localStorage.removeItem('Edit')
  },
  data () {
    return {
      drawer: false,
      // 上传图片需要的数据
      qiniuDataThree: {
        token: '',
        key: ''
      },
      value: '',
      title: '', // 对话框组件
      informationDate: '', // 资讯日期
      input: '', // 输入框
      text: '', // 自定义标签名
      articlePageShowArr: [{
        value: true,
        label: '是'
      }, {
        value: false,
        label: '否'
      }], // 下拉选择
      informationTitle: '', // 资讯标题
      childCategoryIdArr: [0, 1, 2], // 子频道id
      data: {
        // eslint-disable-next-line no-tabs
        htmlContent: ''//	资讯内容
      },
      articlePageShow: '', // 是否资讯列表推荐（是否频道推荐）
      source: '', // 来源
      frontPageShow: '', // 是否首页推荐
      showHide: '', // 是否展示
      articlePageWeight: '', // 资讯列表推荐权重
      frontPageWeight: '', // 首页推荐权重
      childCategoryId: '', // 子频道Id（是否推荐合辑）
      childCategoryWeight: '', // 子频道权重
      likesNum: '', // 点赞数
      shareNum: '', // 分享数
      collectNum: '', // 收藏数
      clicks: '', // 浏览量（点击数）
      publishDate: '', // 发布日期（未写）
      imagePath: '', // 图片地址
      channelCategoryId: '', // 主频道的id
      nameLabel: '', // 标签名
      labelName: [], // 装标签名的数组
      lableName2: [], // 分类名
      // 所选的标签
      tags: '',
      dialogImageUrl: '', // 图片上传
      addDialogVisible: '',
      dialogVisible: false, // 弹出框关闭时需要的参数 为false时就代表当前元素消失

      Edits: {
        originalContent: '',
        originalHref: ''
      }, // 从资讯列表页接收过来的数据
      // 主资讯频道
      mainTags: [],
      // 子频道数组
      childTags: [],
      // 是爬虫进来的 还是资讯列表进来的
      isPachong: true,
      clear: false,
      museumId: '',
      museumList: [],
      isAdd: true
    }
  },
  watch: {
    '$route': function () {
      this.getWen()
    },
    'channelCategoryId': function () {
      this.$http('/stage/article/getChildChannelCategory', { parentId: this.channelCategoryId }, 'get', res => {
        this.childTags = res.data.data
      })
    }
  },
  methods: methods,
  mounted () {
    if (this.$route.query.id) {
      this.getWen()
    } else {
      let Edit = JSON.parse(localStorage.getItem('Edit'))
      if (Edit) {
        this.Edits.id = Edit.id
        this.Edits.originalContent = Edit.htmlContent
        this.Edits.originalHref = Edit.originalHref
        this.imagePath = Edit.imagePath
        this.informationTitle = Edit.title
        this.source = Edit.source
        this.informationDate = Edit.gmtCreate
        this.tags = Edit.articleLabel
        this.channelCategoryId = Edit.channelCategoryId
        this.showHide = Edit.showHide
        this.articlePageShow = Edit.articlePageShow
        this.articlePageWeight = Edit.articlePageWeight
        this.frontPageShow = Edit.frontPageShow
        this.frontPageWeight = Edit.frontPageWeight
        this.likesNum = Edit.likesNum
        this.shareNum = Edit.shareNum
        this.collectNum = Edit.collectNum
        this.clicks = Edit.clicks
        this.isPachong = false
        this.$http('/stage/reservation/getAppMuseumDetail', {museumId: Edit.museumId}, 'get', res => {
          this.museumList = [
            {
              id: Edit.museumId,
              name: res.data.data.name
            }
          ]
          this.museumId = Edit.museumId
        })
      } else {
        this.isAdd = false
        this.isPachong = false
      }
    }
    this.$http('/stage/article/getChannelCategory', {}, 'get', res => {
      this.mainTags = res.data.data
    })
    this.getlabelName()
    this.getFilePrefix()
    this.getAccessToken()
  }
}
</script>

<style lang="less" scoped>

// 富文本模块
.edit{
    width: 50%;
    height: 900px;
    box-sizing: border-box;

    float: left;
    .edit_bottom{
        width: 100%;
        height: 50px;
        button{
            height: 35px;
            width: 80px;
            position: relative;
            background-color: skyblue;
            color: white;
            border-radius: 0;
            margin-left: 30px;
            a {
              position: absolute;
              bottom: 0;
              top: 0;
              left: 0;
              right: 0;
              line-height: 35px;
            }
        }
    }
    //按钮组
    .button_group{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 105px;

    }
}
// 富文本右边
.edit_right{
    width: 49%;

    box-sizing: border-box;
   margin-left: 10px;
    float: left;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
    background-color: white;
    //富文本右模块上方
    .edit_right_top{
        box-sizing: border-box;
        height:500px;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
        span{
            display: flex;

        }
        .information_title{
            width: 100px !important;
            margin-right: 10px;
        }
        .button-new-tag{
            width: 600px;
            margin-left: 70px;
        }
        .image_upload{
            margin-left: 15px;
        }
    }

// 富文本右模块下方
    .edit_right_bottom{
            display: flex;
            flex-direction:column;
            justify-content: space-around;

            .edit_set_module{
                display: flex;
                justify-content: space-around;
                width:100% ;

                height: 500px;
                flex-wrap: wrap;
                span{
                    display: flex;
                    flex-direction: column;
                }
                .all_style{
                    width: 300px;
                    height: 20px;
                }
            .self_style{
             position: relative;
             left: -170px;
            }
            }
    }

}
.edit_right .edit_right_top {
  height: auto !important;
}
.textPreview /deep/img {
  width: 100%;
}
</style>
